<script>
export default {
  name: "my-Login",
};
</script>

<script setup>
import { reactive } from "vue";
import appConfig from "@/components/app-config.vue";
import { loginApi } from "@/api/auth.js";
import useUserStore from "@/stores/user.js";
//错误轻提示
import { ElMessage } from "element-plus";

import { useI18n } from "vue-i18n";

//进入首页先获得路由对象
import { useRouter } from "vue-router";

//获得路由
const router = useRouter();

const userStore = useUserStore(); //获取user的仓库

const { t } = useI18n();

// 表单的数据
const form = reactive({
  account: "",
  password: "",
  auto: false,
});

//登录
async function loginAction() {
  const { data, error } = await loginApi({
    username: form.account,
    password: form.password,
  });
  //这里代码的意思，如果有错误，就不会执行下面的代码
  if (error) return;
  //路由进入首页
  router.replace("/");
  //保存token
  localStorage.setItem("token", data.token);
  //修改全局的登录状态
  userStore.isLogin = true;
  //提示用户
  ElMessage({
    message: t("login.loginSucces"),
    type: "success",
    duration: 1000,
  });
}
</script>

<template>
  <div class="full-page" id="login">
    <div class="bg"></div>
    <app-config class="header-btns"></app-config>
    <div class="wrap">
      <div class="title">
        <img src="/images/logo.svg" alt="" />
        <h3>{{ $t("title") }}</h3>
      </div>

      <el-form :model="form">
        <el-form-item class="account">
          <el-input
            v-model="form.account"
            :placeholder="$t('login.accountTip')"
          />
        </el-form-item>
        <el-form-item class="password">
          <el-input
            v-model="form.password"
            :placeholder="$t('login.passwordTip')"
          />
        </el-form-item>
        <el-form-item class="btns">
          <el-checkbox :label="$t('login.autoLogin')" v-model="form.auto" />
          <el-link type="primary">{{ $t("login.forgetPsd") }}</el-link>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn" type="primary" @click="loginAction">
            {{ $t("login.login") }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped lang="scss">
.bg {
  width: 100%;
  height: 100%;
  background-image: url(/images/bg.png);
  filter: blur(5px) grayscale(20%);
}
.header-btns {
  position: fixed;
  top: 20px;
  right: 50px;
}
.wrap {
  width: 350px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  .title {
    padding: 30px;
    img {
      width: 75%;
      display: block;
      margin: 0 auto;
    }
    h3 {
      text-align: center;
      padding-top: 20px;
      font-size: 35px;
      font-weight: bolder;
      color: #fff;
    }
  }
  .account {
    ::v-deep .el-input__wrapper::before {
      content: "";
      width: 20px;
      height: 20px;
      background-image: url(@/assets/icons/account.png);
      background-size: cover;
      background-position: center;
      margin-right: 10px;
    }
  }
  .password {
    ::v-deep .el-input__wrapper::before {
      content: "";
      width: 20px;
      height: 20px;
      background-image: url(@/assets/icons/password.png);
      background-size: cover;
      background-position: center;
      margin-right: 10px;
    }
  }
  .btns {
    ::v-deep .el-form-item__content {
      justify-content: space-between;
    }
  }
  .login-btn {
    width: 100%;
  }
}
</style>
